<template>
  <li>
    <label>
        <!-- 给多选框的checked属性动态绑定true或false -->
        <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
        <!-- 不建议-这样是修改props属性：还可以使用v-model，这里是双向绑定，可以直接该对象属性值，但不能直接改对象 -->
        <!-- v-model修改了props的值，违反vue原则 -->
        <!-- <input type="checkbox" v-model="todo.done"/> -->
        <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" @click="handelDelete(todo.id)">删除</button>
  </li>
</template>

<script>
    export default {
        name:'MyItem',
        // 接收MyList组件传递的todo
        props:['todo','ListcheckTodo','ListDeleteTodo'],
        methods:{
            //勾选or取消勾选
            handleCheck(id){
                this.ListcheckTodo(id)
            },
            //删除
            handelDelete(id){
                if(confirm('确认删除吗？')){
                    //点确定走这里
                    this.ListDeleteTodo(id)
                }
            }
        }
    }
</script>

<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
/* 鼠标悬停背景色 */
li:hover{
  background: #ddd;
}
/* 鼠标悬停，显示后面的删除按钮 */
li:hover button{
  display: block;
}
</style>